<style>
    .vehicle-item:hover {background-color: #f3f3f3;}
    .vehicle-item .exit-btn{font-size: 22px;display: none;}
    .vehicle-item:hover .exit-btn{display: block;}
</style>

<div class="weui-flex" style="min-height: 400px; width: 80%; margin: 0 auto;">
    <!-- 我的车辆列表开始 -->
    <div class="weui-flex__item bc-list" id="maintain-user-vehicle-list" data-port="http://api.hongyanche.com/maintain/vehicle_list"
         style="flex: 1">
        <div class="weui-cells__title">我的车辆 / <a id="js-vehicle-add-btn" href="javascript:void(0)">添加车辆</a></div>
        <div class="bc-list-template">
            <div class="js-vehicle-item weui-media-box weui-media-box_appmsg vehicle-item" style="cursor: pointer; position: relative;">
                <div class="weui-media-box__hd">
                    <img class="weui-media-box__thumb" src="http://api.hongyanche.com/_hongyanche/material/logo.jpg" alt="">
                </div>
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">
                        <driving_card list=1 class="hidden"></driving_card>
                        <vehicle_license_province list=1></vehicle_license_province>
                        <vehicle_license_number list=1></vehicle_license_number>
                        <review list=1 style="float: right; color: orange; font-weight: 100"></review>
                    </h4>
                    <!-- <p class="weui-media-box__desc">上次保养：2017-05-08</p> -->
                </div>
                <div class="exit-btn" style="position: absolute; right: 0;top: 0;">
                    <i class="weui-icon weui-icon-cancel weui-icon-original"></i>
                    <customer_id list=1 class="hidden"></customer_id>
                </div>
            </div>
        </div>
    </div>
    <!-- 我的车辆列表结束 -->
    <!-- 车辆详情页开始 -->
    <div id="vehicle-detail" class="weui-flex__item js-vehicle-details-template" style="display: none;">
        <div class="weui-cells__title">车辆详情</div>
        <div class="weui-cells">
            <div id="vehicle-detail-content" class="weui-cells">

            </div>
        </div>
    </div>
    <!-- 车辆详情页结束 -->
    <!-- 添加车辆开始 -->
    <div class="weui-flex__item js-vehicle-add-template" style="display: none">
        <div class="weui-cells__title">添加车辆</div>
        <div class='page__bd'>
            <div class='weui-cells weui-cells__radius' style="margin: 0 10px;">
                <div class='weui-cell'>
                    <div class='weui-cell__hd'>
                        <label class='weui-label'>vin</label>
                    </div>
                    <div class='weui-cell__bd'>
                        <input class='vehicle-create weui-input' info=1 name='vin' placeholder="请输入vin号"/>
                    </div>
                </div>
                <div class='weui-cell'>
                    <div class='weui-cell__hd'>
                        <label class='weui-label'>角色</label>
                    </div>
                    <label href="javascript: void(0)">
                        <div class='weui-cell__bd'>
                            <input type="radio" class="weui-check vehicle-create" name="role" value="1">
                            <i class="weui-icon weui-icon-checked"></i>使用者
                        </div>
                    </label>
                    <label>
                        <div class='weui-cell__bd'>
                            <input type="radio" class="weui-check vehicle-create" name="role" value="2">
                            <i class="weui-icon weui-icon-checked"></i>拥有者
                        </div>
                    </label>
                </div>
                <div class='weui-cell'>
                    <div class='weui-cell__hd'>
                        <label class='weui-label'>姓名</label>
                    </div>
                    <div class='weui-cell__bd'>
                        <input class='vehicle-create weui-input' info=1 name='uname' placeholder="请输入姓名"/>
                    </div>
                </div>
                <div class='weui-cell '>
                    <div class='weui-cell__hd'>
                        <label class='weui-label'>车辆所属</label>
                    </div>
                    <div class='weui-cell__bd'>
                        <select class='vehicle-create weui-select' in1fo=1 name='vehicle_license_province'>
                            <option value=''>省</option>
                            <option>京</option>
                            <option>津</option>
                            <option>沪</option>
                            <option>渝</option>
                            <option>冀</option>
                            <option>晋</option>
                            <option>辽</option>
                            <option>吉</option>
                            <option>黑</option>
                            <option>苏</option>
                            <option>浙</option>
                            <option>皖</option>
                            <option>闽</option>
                            <option>赣</option>
                            <option>鲁</option>
                            <option>豫</option>
                            <option>鄂</option>
                            <option>湘</option>
                            <option>粤</option>
                            <option>琼</option>
                            <option>川</option>
                            <option>贵</option>
                            <option>云</option>
                            <option>陕</option>
                            <option>甘</option>
                            <option>青</option>
                            <option>藏</option>
                            <option>桂</option>
                            <option>蒙</option>
                            <option>宁</option>
                            <option>新</option>
                        </select>
                    </div>

                    <div class='weui-cell'>
                        <div class='weui-cell__hd'>
                            <label class='weui-label'>车牌号码</label>
                        </div>
                        <div class='weui-cell__bd'>
                            <input class='vehicle-create weui-input' in1fo=1 name='vehicle_license_number'
                                   placeholder="请输入车牌号码"/>
                        </div>
                    </div>
                </div>

                <div class='weui-cell weui-cell_select'>
                    <div class='weui-cell__hd'>
                        <label class='weui-label'>车辆类别</label>
                    </div>
                    <div class='weui-cell__bd'>
                        <select class='vehicle-create weui-select' info=1 name='type'>
                            <option value=''>请选择车辆类别</option>
                            <option>自卸车</option>
                            <option>牵引车</option>
                            <option>载货车</option>
                            <option>专用车</option>
                        </select>
                    </div>
                </div>

                <div class='weui-cell weui-cell_select'>
                    <div class='weui-cell__hd'>
                        <label class='weui-label'>车辆品牌</label>
                    </div>
                    <div class='weui-cell__bd'>
                        <select class='vehicle-create weui-select' info=1 name='vehicle_brand'>
                            <option value=''>请输入车辆品牌</option>
                            <option>上汽红岩</option>
                            <option>一汽解放</option>
                            <option>中国重汽</option>
                            <option>福田欧曼</option>
                            <option>东风商用车</option>
                            <option>陕汽重卡</option>
                            <option>华菱重卡</option>
                            <option>北奔重卡</option>
                            <option>联合卡车</option>
                            <option>其他</option>
                        </select>
                    </div>
                </div>
                <!-- <div class="weui-cell">
                    <div class='weui-cell__hd'>
                        <label class='weui-label'>上传行驶证</label>
                    </div>
                    <img id="showImg" class="weui-uploader__file vehicle-create" src="" alt="" name="driving_card" type="img">
                    <div class="weui-uploader__input-box">
                        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                    </div>
                </div> -->
            </div>
            <div class='weui-btn-area'>
                <a id='vehicle-add-confirm' href="javascript: void(0);"
                   class="weui-btn weui-btn_fle1x weui-btn_primary">添加</a>
            </div>
        </div>
    </div>
    <!-- 添加车辆结束 -->
</div>

<script>

    (function (w, u) {
        /**
         * 上传图片到服务器
         * @param inputID 上传的输入框ID
         * @param uri 上传的地址
         * @return Promise
         * */
        const uploadImg = function (inputID, uri) {
            return new Promise(function(resolve, reject) {
                $(inputID).on('change', function () {
                    var formDate = new FormData();
                    formDate.append('0', $(inputID)[0].files[0]);
                    $.ajax({
                        url: uri,
                        type: 'POST',
                        cache: false,
                        data: formDate,
                        processData: false,
                        contentType: false,
                        xhrFields:{
                            withCredentials:true
                        },
                        success: function (data) {
                            resolve(data)
                        },
                        error: function (err) {
                            reject(err)
                        }
                    })
                })
            })
        };
        var vehicleAddBtn = document.getElementById('js-vehicle-add-btn');
        var vehicleDetailsTemplate = $('.js-vehicle-details-template');
        var vehicleAddTemplate = $('.js-vehicle-add-template');

        POST.init('#vehicle-add-confirm', {
            text: "添加",
            url: '/maintain/vehicle_create',
            input: function () {
                var r = {};
                $('.vehicle-create').each(function (index, el) {
                    if ($(el).attr('type') == 'radio') {
                        if (el.checked) {
                            r[$(el).attr('name')] = $   (el).val();
                        }
                    }
                    if ($(el).attr('type') == 'img'){
                        r[$(el).attr('name')] = $(el).attr('src');
                    } else {
                        r[$(el).attr('name')] = $(el).val();
                    }
                });
                return r;
            },
            success: function () {
                $('#vehicle-add-input').addClass('hidden');
                $('#vehicle-add-success').removeClass('hidden');
                LIST.reload('#maintain-user-vehicle-list');
                $('.js-vehicle-add-template').hide();
            }
        });
        $('#vehicle-add-more').on('click', function () {
            $('#vehicle-add-input').removeClass('hidden');
            $('#vehicle-add-success').addClass('hidden');
            $('.vehicle-create').val('');
        });

        vehicleAddBtn.onclick = function () {
            vehicleDetailsTemplate.hide();
            vehicleAddTemplate.show();

        };
        $('#maintain-user-vehicle-list').on('click','.js-vehicle-item',function () {
            $('.js-vehicle-add-template').hide();
            $('#vehicle-detail').show();
            var uname = $(this).find('uname').text();
            var vin = $(this).find('vin').text();
            var pnum = $(this).find('pnum').text();
            var role = $(this).find('role').text();
            var vehicleBrand = $(this).find('vehicle_brand').text();
            var vehicle_license_province = $(this).find('.bc-modal-data > vehicle_license_province').text();
            var vehicle_license_number = $(this).find('.bc-modal-data > vehicle_license_number').text();
            var fllVehicleNumber = vehicle_license_province + vehicle_license_number;
            var driving_card = $(this).find('.bc-modal-data > driving_card').text();
            showVehicleDetails(uname, vin, pnum, role, vehicleBrand, fllVehicleNumber, driving_card);
        });

        function showVehicleDetails(uname, vin, pnum, role, vehicleBrand, vehicleNumber, drivingCard) {
            var roleDetail = null;
            var vehicleDetailTemplate = document.getElementById('vehicle-detail-content');
            var unaneTemplate = "<div class='weui-cell'>" + "<div class='weui-cell__hd'>" + "<label class='weui-label'>姓名：</label>" + "</div>" + "<div class='weui-cell__bd'>" + "<p> " + uname + "</p>" + "</div>" + "</div>";

            var vinTemplate = "<div class='weui-cell'>" + "<div class='weui-cell__hd'>" + "<label class='weui-label'>VIN号：</label>" + "</div>" + "<div class='weui-cell__bd'>" + "<p>" + vin + "</p>" + "</div>" + "</div>";
            var pnumTemplate = "<div class='weui-cell'>" + "<div class='weui-cell__hd'>" + "<label class='weui-label'>手机号码：</label>" + "</div>" + "<div class='weui-cell__bd'>" + "<p>" + pnum + "</p>" + "</div>" + "</div>";
            if (role == 1) {
                roleDetail = "使用者";
            } else if (role == 2) {
                roleDetail = "拥有者"
            }
            var roleTemplate = "<div class='weui-cell'>" + "<div class='weui-cell__hd'>" + "<label class='weui-label'>角色：</label>" + "</div>" + "<div class='weui-cell__bd'>" + "<p>" + roleDetail + "</p>" + "</div>" + "</div>";
            var vehicleBrandTemplate = "<div class='weui-cell'>" + "<div class='weui-cell__hd'>" + "<label class='weui-label'>品牌：</label>" + "</div>" + "<div class='weui-cell__bd'>" + "<p>" + vehicleBrand + "</p>" + "</div>" + "</div>";
            var vehicleNumberTemplate = "<div class='weui-cell'>" + "<div class='weui-cell__hd'>" + "<label class='weui-label'>车牌号：</label>" + "</div>" + "<div class='weui-cell__bd'>" + "<p>" + vehicleNumber + "</p>" + "</div>" + "</div>";
            var drivingCardTemplate = "<div class='weui-cell'>" + "<div class='weui-cell__hd'>" + "<label class='weui-label'>行驶证：</label>" + "</div>" + "<div class='weui-cell__bd'>" + "<p>" + "<img style='width: 100px;' src='"+ drivingCard +"'>" + "</p>" + "</div>" + "</div>";
//            $('#vehicle-detail-content > table').append(unaneTemplate, vinTemplate, pnumTemplate, roleTemplate, vehicleBrandTemplate, vehicleNumberTemplate);
            $('#vehicle-detail-content').html(unaneTemplate + vinTemplate + pnumTemplate + roleTemplate + vehicleBrandTemplate + vehicleNumberTemplate+ drivingCardTemplate);
        }

        // 上传行驶证
        // /upload/driving_license
        uploadImg('#uploaderInput', '/upload/driving_license').then(function(data) {
            $('#showImg').attr('src', data.data.url);
        });

        // 车辆删除按钮
        $('#maintain-user-vehicle-list').on('click', '.exit-btn', function (event) {
            var customerId = $(this).children('customer_id').text();
            var deleteBtn = confirm('是否删除该车辆信息?');
            if (deleteBtn) {
                $.ajax({
                    url: '/maintain/vehicle_remove',
                    type: 'POST',
                    data: {
                        customer_id: customerId
                    },
                    xhrFields:{
                        withCredentials:true
                    },
                    success: function (data) {
                        alert('删除成功');
                        LIST.reload('#maintain-user-vehicle-list');
                    },
                    error: function (err) {
                        console.error(err)
                    }
                })
            }
        })
    })(window, undefined);
</script>